<template>
	<div class="surperActivity">
		<header><van-nav-bar title="超级会员活动" left-arrow @click-left="$router.go(-1)" /></header>
		<div class="tabs">
			<van-tabs v-model="params.participationStatus" @change="initData(true)" color="#FFB72F">
				<van-tab :title="item.label" v-for="(item, index) in tabsList" :name="item.state" :key="index"></van-tab>
			</van-tabs>
		</div>
		<div v-if="loading" class="noInfo loading"><img src="../../../assets/img/flow/loading.gif" alt="" width="80px" /></div>
		<div class="list" ref="listRef" v-if="list.length > 0 && !loading">
			<div class="list-item" v-for="(item, index) in list" :key="index" @click="onClickToDetail(item)">
				<div style="display: flex">
					<div style="flex: 1" class="">
						<div
							class="list-item-state"
							:style="{
								backgroundColor: STATE_TEXT_COLOR[item.participationStatus]
							}"
						>
							{{ STATE_TEXT[item.participationStatus] }}
						</div>
					</div>
					<!-- <span style="flex: 1;text-align: right;margin-right: 5px;line-height: 32px;" class="tips" v-if="item.operaLog && item.operaLog.length > 5">
						{{ item.operaLog }}
					</span> -->
				</div>
				<div>
					<div class="list-item-label list-item-title" style="">{{ item.merchantName }}</div>
					<div class="list-item-label" style="display: flex;margin-top: 25px;">
						<div style="flex: 1;font-weight: bold">{{ item.activityContent }}</div>
						<div style="flex: 1;" class="list-item-financingParty">
							出资方：{{
								item.financingParty === INVITED_MERCHANT_TYPE ? FINANCINGPARTY_STATE_TEXT[INVITED_MERCHANT_TYPE] : FINANCINGPARTY_STATE_TEXT[THIS_MERCHANT_TYPE]
							}}
							<van-icon style="color: #ffb72f;margin-left: 5px" name="question-o" @click.stop.prevent="onClickBusinessTips" />
						</div>
					</div>
					<div class="list-item-label">
						<div class="list-item-time">
							<van-icon :name="timeIcon" />
							<!-- <span v-if="item.participationStatus === 1">
								报名时间：
								<span v-if="item.type !== 0">长期</span>
							</span>
							<span v-else>
								活动时间：
								<span v-if="item.type !== 0">长期</span>
							</span> -->
							<span>
								活动时间：
								<span v-if="item.type !== 0">长期</span>
							</span>
						</div>
						<!-- <div class="list-item-text" v-if="item.type === 0 && item.participationStatus === 1">
							<span>{{ item.signUpStartTime }}至{{ item.signUpEndTime }}</span>
						</div> -->

						<div class="list-item-text" v-if="item.type === 0">
							<span>{{ item.startTime }}至{{ item.endTime }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<van-empty v-if="list.length === 0 && !loading" :image="emptyUrl" description="暂无活动" />
	</div>
</template>

<script>
import { activityAvailableQuery } from '@/api/flow/index';
import { filterMoney, FINANCINGPARTY_STATE_TEXT, INVITED_MERCHANT_TYPE, STATE_TEXT, STATE_TEXT_COLOR, THIS_MERCHANT_TYPE } from './config';
import { Dialog } from 'vant';

export default {
	name: 'index',
	data() {
		return {
			STATE_TEXT,
			STATE_TEXT_COLOR,
			INVITED_MERCHANT_TYPE,
			THIS_MERCHANT_TYPE,
			FINANCINGPARTY_STATE_TEXT,
			emptyUrl: require('@/assets/img/empty-data.png'),
			tabsList: [
				{
					state: '',
					label: '全部'
				},
				{
					state: 1,
					label: '未处理'
				},
				{
					state: 2,
					label: '已参与'
				}
			],
			params: {
				participationStatus: '',
				page: 1,
				pageSize: 10
			},
			list: [],
			hasNextPage: false,
			loading: true,
			timeIcon: require('@/assets/img/flow/time.png')
		};
	},
	computed: {
		flowQueryData() {
			return this.$store.state.flow.flowQueryData;
		}
	},
	filters: {
		filterMoney
	},
	created() {
		this.initData(true);
	},
	mounted() {
		this.$refs.listRef?.addEventListener('scroll', this.nextPage, true);
	},
	updated() {
		this.$refs.listRef?.addEventListener('scroll', this.nextPage, true);
	},
	methods: {
		resolveStateText({ status, participationStatus }) {
			return '已拒绝';
		},
		nextPage() {
			if (!this.hasNextPage) return;
			let scrollHeight = this.$refs.listRef.scrollHeight;
			let scrollTop = this.$refs.listRef.scrollTop;
			let clientHeight = this.$refs.listRef.clientHeight;
			if (scrollHeight - clientHeight <= scrollTop) {
				this.params.page++;
				this.initData();
			}
		},
		onClickChangeTab(state) {
			this.params.participationStatus = state;
			this.initData(true);
		},
		async initData(isClear = false) {
			if (isClear) {
				this.params.page = 1;
				this.list = [];
				this.loading = true;
			}
			const { data } = await activityAvailableQuery({
				...this.params,
				merchantId: this.flowQueryData.merchantId
			});
			const { code, msg, data: res } = data;
			if (!res) {
				this.loading = false;
			}
			if (code === 0 && msg === 'success') {
				const { list, hasNextPage } = res;
				this.list = [...this.list, ...list];
				this.hasNextPage = hasNextPage;
				setTimeout(() => {
					this.loading = false;
				}, 800);
			} else {
				this.loading = false;
				this.$toast.fail(msg);
			}
		},
		onClickBusinessTips() {
			Dialog({
				title: '提示',
				message: '出资方指优惠折扣或活动优惠的钱由谁承担'
			});
		},
		onClickToDetail({ id }) {
			this.$router.push({
				name: 'surperActivityDetail',
				query: {
					id
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.section-line {
	position: relative;
	padding: 10px;
	margin: 10px 0;
	&::after {
		position: absolute;
		box-sizing: border-box;
		content: ' ';
		pointer-events: none;
		right: 16px;
		bottom: -10px;
		left: 16px;
		border-bottom: 1px solid #ebedf0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
}
.tips {
	color: #f05357;
	margin-left: 20px;
	margin-top: 5px;
	font-size: 0.75rem;
}
.van-icon {
	font-size: 1.125rem;
	margin-right: 5px;
}
/deep/.van-tab--active {
	color: #ffb72f !important;
}
.surperActivity {
	.tabs {
		padding: 10px;
		.van-tag {
			margin: 0 5px;
		}
	}
	.list {
		height: 86vh;
		overflow: hidden;
		overflow-y: scroll;
		font-size: 0.85rem;
		background-color: whitesmoke;
		&-item {
			width: 95%;
			margin: 20px auto;
			background-color: white;
			box-shadow: 0px 0px 5px 0px rgba(166, 155, 149, 0.12);
			border-radius: 15px;
			padding: 5px 0 30px 0;
			&-state {
				width: 138px;
				height: 50px;
				color: white;
				line-height: 50px;
				text-align: center;
				border-bottom-right-radius: 9999px;
				border-top-right-radius: 9999px;
				background: #ffb72f;
				font-size: 26px;
				margin-top: 14px;
			}
			&-label {
				padding: 5px 30px;
				margin-top: 10px;
			}
			&-text {
				font-weight: 500;
				color: #131313;
				opacity: 0.8;
			}
			&-title {
				font-weight: bold;
				display: flex;
				align-items: center;
				font-size: 32px;
			}
			&-financingParty {
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.van-icon-question-o {
				color: green#ffb72f;
			}
			&-time {
				display: flex;
				align-items: center;
			}
		}
	}
	/deep/.van-empty__image {
		width: inherit;
		height: inherit;
	}
	.noInfo {
		margin-top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
